<template>
	<view class="category" >
		<view style="width: 100%;" v-if="shoplist.length">
			<!-- 搜索框 -->
			<view >
				<!-- <view class="input-view-box">
					<text>输入商品名称</text>
				</view>
				<view class="input-view-right">
					<uni-icons style="line-height: 30px;" type="search" size="22" color="#666666" />
				</view> -->
				<uni-search-bar @confirm="searchtm" placeholder="输入商品名称" @cancel="searchtm"   :focus="true" v-model="data.keyword"   radius="30" >
				</uni-search-bar>
			</view>
			<!-- 左右联动 -->
			<!-- #ifdef APP-PLUS -->
			<view class="category" style="height: calc(100vh - 60px);">
				<view class="nav">
						<!-- #ifdef APP-PLUS -->
						<scroll-view class="bg" scroll-y="true"  :scroll-with-animation="true" style="height: calc(100vh - 60px);">
							<block v-for="(item,index) in shoplist" :key="index">
									<view class="nav-item" :class="{'ac':data.active == index}" @click="changeNav(index,item.ID)">
										<text>{{item.name}}</text>
									</view>
								</block>
							</scroll-view>
						<!-- #endif -->
						<!-- #ifndef APP-PLUS -->
						<scroll-view class="bg" scroll-y="true"  :scroll-with-animation="true" style="height: calc(100vh - 120px);">
							<block v-for="(item,index) in shoplist" :key="index">
									<view class="nav-item" :class="{'ac':data.active == index}" @click="changeNav(index,item.ID)">
										<text>{{item.name}}</text>
									</view>
								</block>
							</scroll-view>
						<!-- #endif -->
				
					</view>
					<view class="goodsBox" v-if="shoplist[data.active].arr">
						<view class="second">
							<scroll-view scroll-x="true" style="white-space: nowrap;">
								<text class="back" v-for="(min,indexs) in shoplist[data.active].arr" :key="indexs" @click="second(min.ID)"
								:class="{'linbei':data.secondID==min.ID}">{{min.name}}</text>
							</scroll-view>
						</view>
						<view>
							<!-- #ifdef APP-PLUS -->
							<scroll-view scroll-y="true" @scrolltolower='scrolltolower()' style="height: calc(100vh - 100px);">
								<empty v-if="data.shopsecond.length==0"></empty>
									<view class="goods">
										<view class="goods-item" v-for="(item,index) in data.shopsecond" :key="index" >
											<image class="commImg" :src="item.img" mode="" @click="goURl('/pages/commodity/details?id='+item.ID)"></image>
											<view class="commodList">
												<text class="name textsl2" @click="goURl('/pages/commodity/details?id='+item.ID)">{{item.name}}</text>
												<view class="price ">
													<text @click="goURl('/pages/commodity/details?id='+item.ID)">￥{{formatNumber(item.price+item.coupon,2)}}</text>
													<!-- <image @click="goURl(`/pages/commodity/details?id=${item.ID}`)" src="https://pubuimg.cqguanjie.cn/chat/16945909171691"></image> -->
												</view>
												<view class="price" style="font-size: 12px;">
													<text @click="goURl('/pages/commodity/details?id='+item.ID)">现金：{{$toFiexd(item.price,2)}}</text>
													<text style="margin-left: 5px;" v-if="item.coupon>0" @click="goURl('/pages/commodity/details?id='+item.ID)">{{item.is_single==4?'dl':'zkfc'}}：{{$toFiexd(item.coupon,2)}}</text>
												</view>
											<!-- 	<view class="preferential">
													<text @click="goURl('/pages/commodity/details?id='+item.ID)">￥{{$toFiexd(item.market,2)}}</text>
													<image @click="bindChange(item,index,1)" src="https://pubuimg.cqguanjie.cn/chat/16948484441352"></image>
												</view> -->
											</view>
										</view>
									</view>
								</scroll-view>
							<!-- #endif -->
							<!-- #ifndef APP-PLUS -->
							<scroll-view scroll-y="true" @scrolltolower='scrolltolower()' style="height: calc(100vh - 160px);">
								<empty v-if="data.shopsecond.length==0"></empty>
									<view class="goods">
										<view class="goods-item" v-for="(item,index) in data.shopsecond" :key="index" >
											<image class="commImg" :src="item.img" mode="" @click="goURl('/pages/commodity/details?id='+item.ID)"></image>
											<view class="commodList">
												<text class="name textsl2" @click="goURl('/pages/commodity/details?id='+item.ID)">{{item.name}}</text>
												<view class="price">
													<text @click="goURl('/pages/commodity/details?id='+item.ID)">￥{{formatNumber(item.price+item.coupon,2)}}</text>
												</view>
												<view class="price" style="font-size: 12px;">
													<text @click="goURl('/pages/commodity/details?id='+item.ID)">现金：{{$toFiexd(item.price,2)}}</text>
													<text style="margin-left: 5px;" v-if="item.coupon>0" @click="goURl('/pages/commodity/details?id='+item.ID)">{{item.is_single==4?'dl':'zkfc'}}：{{$toFiexd(item.coupon,2)}}</text>
												</view>
											<!-- 	<view class="preferential">
													<text @click="goURl('/pages/commodity/details?id='+item.ID)">￥{{$toFiexd(item.market,2)}}</text>
													<image @click="bindChange(item,index,1)" src="https://pubuimg.cqguanjie.cn/chat/16948484441352"></image>
												</view> -->
											</view>
										</view>
									</view>
								</scroll-view>
							<!-- #endif -->
								
				
						</view>
					</view>
				</view>
			<!-- #endif -->
			
			<!-- #ifndef APP-PLUS -->
				<view class="category" style="height: calc(100vh - 120px);">
					<view class="nav">
							<!-- #ifdef APP-PLUS -->
							<scroll-view class="bg" scroll-y="true"  :scroll-with-animation="true" style="height: calc(100vh - 60px);">
								<block v-for="(item,index) in shoplist" :key="index">
										<view class="nav-item" :class="{'ac':data.active == index}" @click="changeNav(index,item.ID)">
											<text>{{item.name}}</text>
										</view>
									</block>
								</scroll-view>
							<!-- #endif -->
							<!-- #ifndef APP-PLUS -->
							<scroll-view class="bg" scroll-y="true"  :scroll-with-animation="true" style="height: calc(100vh - 120px);">
								<block v-for="(item,index) in shoplist" :key="index">
										<view class="nav-item" :class="{'ac':data.active == index}" @click="changeNav(index,item.ID)">
											<text>{{item.name}}</text>
										</view>
									</block>
								</scroll-view>
							<!-- #endif -->
					
						</view>
						<view class="goodsBox" v-if="shoplist[data.active].arr">
							<view class="second">
								<scroll-view scroll-x="true" style="white-space: nowrap;">
									<text class="back" v-for="(min,indexs) in shoplist[data.active].arr" :key="indexs" @click="second(min.ID)"
									:class="{'linbei':data.secondID==min.ID}">{{min.name}}</text>
								</scroll-view>
							</view>
							<view>
								<!-- #ifdef APP-PLUS -->
								<scroll-view scroll-y="true" @scrolltolower='scrolltolower()' style="height: calc(100vh - 100px);">
									<empty v-if="data.shopsecond.length==0"></empty>
										<view class="goods">
											<view class="goods-item" v-for="(item,index) in data.shopsecond" :key="index" >
												<image class="commImg" :src="item.img" mode="" @click="goURl('/pages/commodity/details?id='+item.ID)"></image>
												<view class="commodList">
													<text class="name textsl2" @click="goURl('/pages/commodity/details?id='+item.ID)">{{item.name}}</text>
													<view class="price">
														<text @click="goURl('/pages/commodity/details?id='+item.ID)">￥{{formatNumber(item.price+item.coupon,2)}}</text>
													</view>
													<view class="price" style="font-size: 12px;">
														<text @click="goURl('/pages/commodity/details?id='+item.ID)">现金：{{$toFiexd(item.price,2)}}</text>
														<text style="margin-left: 5px;" v-if="item.coupon>0" @click="goURl('/pages/commodity/details?id='+item.ID)">{{item.is_single==4?'dl':'zkfc'}}：{{$toFiexd(item.coupon,2)}}</text>
													</view>
												<!-- 	<view class="preferential">
														<text @click="goURl('/pages/commodity/details?id='+item.ID)">￥{{$toFiexd(item.market,2)}}</text>
														<image @click="bindChange(item,index,1)" src="https://pubuimg.cqguanjie.cn/chat/16948484441352"></image>
													</view> -->
												</view>
											</view>
										</view>
									</scroll-view>
								<!-- #endif -->
								<!-- #ifndef APP-PLUS -->
								<scroll-view scroll-y="true" @scrolltolower='scrolltolower()' style="height: calc(100vh - 160px);">
									<empty v-if="data.shopsecond.length==0"></empty>
										<view class="goods">
											<view class="goods-item" v-for="(item,index) in data.shopsecond" :key="index" >
												<image class="commImg" :src="item.img" mode="" @click="goURl('/pages/commodity/details?id='+item.ID)"></image>
												<view class="commodList">
													<text class="name textsl2" @click="goURl('/pages/commodity/details?id='+item.ID)">{{item.name}}</text>
													<view class="price">
														<text @click="goURl('/pages/commodity/details?id='+item.ID)">￥{{formatNumber(item.price+item.coupon,2)}}</text>
													</view>
													<view class="price" style="font-size: 12px;">
														<text @click="goURl('/pages/commodity/details?id='+item.ID)">现金：{{$toFiexd(item.price,2)}}</text>
														<text style="margin-left: 5px;" v-if="item.coupon>0" @click="goURl('/pages/commodity/details?id='+item.ID)">{{item.is_single==4?'dl':'zkfc'}}：{{$toFiexd(item.coupon,2)}}</text>
													</view>
													<!-- <view class="preferential">
														<text @click="goURl('/pages/commodity/details?id='+item.ID)">￥{{$toFiexd(item.market,2)}}</text>
														<image @click="bindChange(item,index,1)" src="https://pubuimg.cqguanjie.cn/chat/16948484441352"></image>
													</view> -->
												</view>
											</view>
										</view>
									</scroll-view>
								<!-- #endif -->
									
					
							</view>
						</view>
					</view>
			<!-- #endif -->

		</view>
		<!-- 立即购买弹窗 -->
		<uni-popup ref="popup" >
			<view class="popup-content">
				<view class="top">
					<uni-icons type="closeempty" size="22" @click="close()"></uni-icons>
				</view>
				<view class="goodsdetail">
					<view class="goodsimg">
						<image :src="data.goods.img?data.goods.img:data.goodsdetali.img" mode="aspectFill"></image>
					</view>
					<view class="right">
						<view class="price">
							￥{{data.goods.price}}
						</view>
						<view class="stock">
							库存：{{data.goods.stock}}
						</view>
					</view>
				</view>
				<view class="numbox">
					<view class="">
						数量
					</view>
					<uni-number-box v-model="data.number" />
				</view>
				<view class="" >
					<view class="specsbox" v-for="(item,index) in data.lists" :key="index">
						<view class="title">
							{{item.attr}}
						</view>
						<view class="specslist">
							<view  v-for="(items,indexs) in item.val" :key="indexs" @click="ckeck(index,indexs)" >
								<text class="specsitem" :class="{'actives':data.listckeck[index]==indexs}">{{items}}</text>
							</view>
						</view>
					</view>
					
				</view>
				<view class="buy" @click="shoppingCart()">
					加入购物车
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import {ref,reactive,getCurrentInstance} from "vue";
	import {onLoad,onShow} from "@dcloudio/uni-app";
	const {proxy} = getCurrentInstance();
	const data = reactive({
		active: 0,
		scrollTop: 0,
		height: 0,
		// 分类列表子集
		shoplistDe: [],
		shopsecond:[],
		pages:1,
		page:0,
		size:20,
		secondID:-1,
		dataID:0,
		isShow:false,			//是否显示规格蒙版
		goods:{},
		lists: [], //规格
		goodsdetali:{},
		listckeck:[],
		listckecks:[],
		selectlist:[],
		speci:0,			//规格ID
		number:1,			//数量
		keyword:'', // 搜素
	})
	let shoplist = ref([])
	const popup=ref()
	onLoad((opt) => {
		try{
			if(opt.id){
				data.dataID=opt.id
				data.active=opt.index
			}
			
		}catch(e){
			data.dataID=0
			data.active=0
		}
		
		secondary()
		// second()
		getdatas()
	})
	onShow(() => {
		// 业务逻辑
	})
	function goURl(url){
		uni.navigateTo({
			url:url
		})
	}
	function buttonClick(e){
		popup.value.open('bottom')
	}
	function scrolltolower(){
		try{
			getdatas()
		}catch(e){
			//TODO handle the exception
		}
		
	}
	// 点击加入购物车
	function create(){
		
	}
	//搜索
	function searchtm(){
		data.shopsecond = []
		data.page = 0
		data.pages = 1
		getdatas()
	}
		// 获取数据
	function getdatas(){
		if(data.page<data.pages){
			data.page++
			proxy.$request({
				url:`api/goods_list_all/${data.dataID}/?class_second_id=${data.secondID}&page=${data.page}&size=${data.size}&keyword=${data.keyword}`,
				method:'GET',
				success:(res)=>{
						console.log(res,"res")
					res.data.data.forEach(item=>{
						data.shopsecond.push(item)
					})
					data.pages = Math.ceil(res.data.total / data.size)
				}
			})
		}
	}
	function ckeck(a, b){ //规格选择
		// console.log("选择完成", data.listckeck)
		data.listckeck[a] = b
		console.log("选择完成", data.listckeck,data.lists)
		let num = data.listckeck.filter(item => {
			return item >= 0
		}).length

		if (num == data.lists.length) {
			let attribute = ''
			data.listckeck.forEach((item, index) => {
				console.log(data.lists[index].id[item])
				attribute = attribute + data.lists[index].id[item] + (index < data.lists.length - 1 ? '|' : '')
			})
			let listsss = []
			data.lists.forEach((item, index) => {
				listsss.push(item.val[data.listckeck[index]])
			})
			data.listckecks = listsss
			console.log("选择完成", data.listckecks)
			data.attribute = attribute
			data.goods = data.goodsdetali.attribute_list.filter(item => {
				return item.attribute == attribute
			}).map(item => {
				return {
					img: item.img,
					coupon: item.coupon,
					price: item.price,
					stock: item.stock,
					ID: item.ID
				}
			})[0]
		}
	}
	// 关闭弹窗
	function close(){
		popup.value.close()
	}
	// 点击加入购物车图片
	function bindChange(item, index, e) {
		proxy.$request({
			url: `api/goods_list_all/0/`,
			method: 'POST',
			data: {
				id:item.ID
			},
			success: (res) => {
				if(res.errno==0){
					data.speci = res.data.attribute_list[0].ID
					if(res.data.attribute_list.length!=1){
						popup.value.open('bottom')
					}else{
						shoppingCart(res.data.attribute_list[0].ID)
					}
					data.lists = arr(res.data.attribute_list)
					data.goodsdetali=res.data
					data.goods = {
						img: res.data.img,
						price: res.data.price,
						stock: res.data.stock,
						coupon: res.data.coupon,
						ID: res.data.attribute_list[0].ID
					}
				}
			}
		})
	}
	// 规格排列组合
	function arr(arr){
		var list = []
		arr[0]['attr'].forEach(f => {
			console.log()
			list.push({
				attr: f.attr,
				val: [],
				id: []
			})
			data.listckeck.push(-1)
		})
		arr.forEach(f => {
			f.attr.forEach(t => {
				for (var k = 0; k < list.length; k++) {
					if (list[k].attr == t.attr) {
						list[k].val.push(t.val)
						list[k].id.push(t.ID)
					}
				}
			})
		})
		for (var i = 0; i < list.length; i++) {
			list[i].val = [...new Set(list[i].val)]
			var s = []
			for (var k = 0; k < list[i].val.length; k++) {
				s.push(k == 0 ? 1 : 0)
			}
			data.selectlist.push(s)
		}
		list.forEach(item=>{
			item.id=Array.from(new Set(item.id))
		})
		return list
	}
	function shoppingCart(id){
		console.log(id);
		let imd = ''
		if(typeof(id)!='object'){
			imd = id
		}else{
			imd = data.speci
		}
		proxy.$request({
			url: `api/shoppingCart/`,
			method: 'POST',
			data: {
				attribute_id:imd,
				number:data.number
			},
			success: (res) => {
				if(res.errno==0){
					uni.showToast({
						title:'加入购物车成功'
					})
					popup.value.close()
				}
				
			}
		})
	}
	// 点击二级分类
	function second(id){
		// if(id){
		// 	data.secondID = id
		// }
		// proxy.$request({
		// 	url:`api/goods_list_all/${data.dataID}/?class_second_id=${data.secondID}&page=1&size=20`,
		// 	method:'GET',
		// 	success:(res)=>{
		// 		data.shopsecond = res.data.data
		// 	}
		// })
		data.page=0
				data.pages=1
				data.shopsecond = []
				data.secondID = id
				
				getdatas()
	}
	// 商品分类
	function secondary(){
		proxy.$request({
			url:`api/typeList/`,
			method:'GET',
			success:(res)=>{
				if(res.errno==0){
					let data = res.data.class_first
					let datas = res.data.class_second
					
					shoplist.value = [{name:'全部',ID:0,arr:[{name:'全部',ID:-1,}]}]
					data.forEach((item,index)=>{
						shoplist.value.push({
							name:item.name,
							ID:item.ID,
							arr:[{
								name:'全部',
								ID:-1,
							}],
						})
						
						datas.forEach((items,indexs)=>{
							if(item.ID == items.class_first_id){
								shoplist.value[index+1].arr.push({
									name:items.name,
									ID:items.ID,
								})
							}
						})
					})
				}
			}
		})
	}
	function changeNav(index,id) {
		data.dataID = id
		data.secondID=-1
		data.active = index;
		// data.scrollTop = data.height * (index - 2);
		data.page=0
		data.pages=1
		data.shopsecond = []
		getdatas()
		// second()
		// 在这里请求接口 展示右侧商品数据
		// data.shoplistDe = data.shoplist[index].child
	}
	function formatNumber(num) {
	    // 检查数字是否为整数
	    if (Number.isInteger(num)) {
	        return num; // 如果是整数，直接返回
	    } else {
	        return num.toFixed(2); // 如果有小数点，返回两位小数
	    }
	}
</script>

<style scoped lang="scss">
	// 30px: 30px;
	// $paddings: 10px;

	page {
		background-color: #fff;
	}

	.input-view {
	
		display: flex;
		flex-direction: row;
		// width: 500rpx;
		flex: 1;
		background-color: #f5f5f5;
		justify-content: space-between;
		height: 70upx;
		border-radius: 30px;
		flex-wrap: nowrap;
		margin: $padding;
		line-height:30px;
		overflow: hidden;

		.input-view-box {
			display: flex;

			text {
				height: 30px;
				line-height: 70upx;
				width: 370rpx;
				padding: 0 0 0 30upx;
				font-size: 16px;
				color: #9f9f9f;
				
			}
		}

		.input-view-right {
			// background-color: red;
			border-radius: 30px ;
			padding: 4upx 20upx;
			color: #FA301B;
		}
	}

	.category {
		display: flex;
		position: absolute;
		width: 100%;
		// height: calc(100% - var(--status-bar-height));

		/* 隐藏滚动条样式 */
		::-webkit-scrollbar {
			width: 0;
			height: 0;
		}




		.bg {
			background: #F7F8F9;
		}

		.nav {
			width: 25%;

			.nav-item {
				width: inherit;
				background: #F7F8F9;
				text-align: center;
				height: 60px;
				position: relative;
				display: flex;
				    justify-content: center;
				    align-items: center;
				text{
					font-size: 30rpx;
					color: #222222;
					white-space:normal;
					word-wrap:break-word;
					line-height: 40rpx;
					padding: 0 8px;
				}
			}

			.ac {
				color: #333;
				font-size: 30rpx;
				background: #fff;
				font-weight: 700;
				// padding: 0 8px;
			}

			.ac:before {
				content: '';
				display: block;
				position: absolute;
				left: 0;
				top: 40upx;
				width: 8rpx;
				height: 50rpx;
				background: $color4;
				border-radius: 2rpx;
			}
		}

		.goodsBox {
			width: 70%;
			padding-left: 30rpx;
			background: #ffffff;
			.second{
				width: 100%;
				display: flex;
				.back{
					display: inline-block;
					padding: 4px 12px;
					background: #f5f5f5;
					color: #666;
					margin-right: 10px;
					border-radius: 20px;
					font-size: 14px;
				}
				.linbei{
					background: $color4;
					color: #fff;
				}
			}
			.goods {
				display: flex;
				flex-wrap: wrap;
				padding: 30rpx 0;

				.goods-item {
					width: 100%;
					display: flex;
					margin-bottom: 40rpx;
					margin-right: 20rpx;
					
					.commImg {
						display: block;
						width: 198rpx;
						height: 180rpx;
						border-radius: 10rpx;
					}
					.commodList{
						width: 65%;
						margin-left: 20upx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						.name{
							color: #303133;
							font-size: 14px;
							font-weight: 700;
						}
						.price{
							display: flex;
							align-items: center;
							text{
								color: #f4391c;
								font-weight: 700;
							}
							image{
								width: 30px;
								height: 14px;
								margin-left: 10upx;
							}
						}
						.preferential{
							display: flex;
							align-items: center;
							justify-content: space-between;
							text{
								text-decoration: line-through;
								color: #909399;
								font-size: 10px;
							}
							image{
								width: 25px;
								height: 25px;
								margin-right: 20px;
							}
						}
					}
					
				}
			}
		}
	}
	.popup-content {
		background-color: #fff;
		padding: 30upx;
		border-radius: 30upx 30upx 0 0;
		// margin-bottom: 50px;
		.top {
			display: flex;
			justify-content: flex-end;
		}
	
		.goodsdetail {
			display: flex;
	
			.goodsimg {
				width: 200upx;
				height: 200upx;
				margin-right: 20upx;
	
				image {
					width: 200upx;
					height: 200upx;
					// background-color: aqua;
					border-radius: 20upx;
				}
			}
	
			.right {
				.price {
					color: red;
					font-size: 36upx;
				}
	
				.stock {
					color: #999;
					font-size: 26 upx;
					margin: 20upx 0;
				}
	
				.specifications {
					font-size: 28upx;
				}
			}
		}
	
		.numbox {
			display: flex;
			justify-content: space-between;
			margin-top: 40upx;
		}
	
		.specsbox {
			margin-top: 40upx;
			.title {
				margin-bottom: 10upx;
			}
	
			.specslist {
				display: flex;
				flex-wrap: wrap;
	
				.specsitem {
					font-size: 28upx;
					padding: 5upx 20upx;
					border-radius: 10upx;
					border: 1upx solid #999;
					color: #999;
					margin-right: 20upx;
					margin-top: 20upx;
				}
	
				.actives {
					background-color: rgba(255, 0, 0, 0.1);
					border: 1upx solid $color4;
					color: $color4;
					border-radius: 10rpx;
				}
			}
		}
	
		.buy {
			background-color: $color4;
			color: #fff;
			padding: 20upx;
			text-align: center;
			border-radius: 40upx;
			margin-top: 40upx;
	
		}
	}
</style>
<style>
	page{
		background-color: #fff;
	}
</style>